<template>
	<view :style="{'--color':color}">
		<status-bar title='安装地址'></status-bar>




		<view class="row bgwhite bor_radius_10 p-left20 p-right20 m-top20">
			<view class="list bot">
				<text class="title_name">预约姓名</text>
				<input type="text" class="flex-1 height color_33 size26" v-model="Aname" placeholder="请输入姓名"
					placeholder-class="place">
			</view>
			<view class="list bot">
				<text class="title_name">手机号码</text>
				<input type="number" class="flex-1 height color_33 size26" v-model="Amobile" placeholder="请输入手机号"
					placeholder-class="place">
			</view>
			<view class="list bot">
				<text class="title_name">预约时间</text>
				<view class="flex-1 height p-re redbors" @click.stop="showTime = true">
					<input type="text" class="rows height color_33 size26" disabled v-model="reservationDate"
						placeholder="选择预约时间" placeholder-class="place">
					<u-datetime-picker ref="datetimePicker" :show="showTime" v-model="timeVal" :minDate="timeVal"
						@cancel="showTime = false" @confirm="confirmTime" class="pickerTime"></u-datetime-picker>
				</view>

			</view>
			<view class="list bot" @click="chooseLocation">
				<text class="title_name">所在地区</text>
				<picker mode="region" disabled :value="region" @change="changeCity" class="flex-1 city">
					<view class="row a-center cityPick">
						<input type="text" disabled class="flex-1 height color_33 size26" v-model="Aregion"
							placeholder="请选择省/市/区" placeholder-class="place">
						<view class="iconfont icon-a-zujian7 color_99 size26"></view>
					</view>
				</picker>
			</view>
			<!-- 	<view class="list bot">
				<text class="title_name">所在地区</text>
				<view class="flex-1 height d-flex  a-center">
					<picker mode="selector"  range-key="RegionName" class="m-right40" :range="province"
					 @change="addressChange($event,0)">
						<view class="flex-1 d-flex a-center picke" >
							<text class="size26 district" :class="region[0]?'color_33':'color_cc'">{{region[0]?region[0]:'选择省'}}</text>
							<view class="iconfont icon-xiangxia1 size30 color_cc m-left4" ></view>
						</view>
					</picker>
					<picker mode="selector"  range-key="RegionName" class="m-right40" :range="city" @change="addressChange($event,1)">
					<view class="flex-1 d-flex a-center picke">
						<text class="size26 district" :class="region[1]?'color_33':'color_cc'">{{region[1]?region[1]:'选择市'}}</text>
						<view class="iconfont icon-xiangxia1 size30 color_cc m-left4"></view>
					</view>
					</picker>
					<picker mode="selector"  range-key="RegionName" :range="district" @change="addressChange($event,2)">
					<view class="flex-1 d-flex a-center picke">
						<text class="size26 district" :class="region[2]?'color_33':'color_cc'">{{region[2]?region[2]:'选择区'}}</text>
						<view class="iconfont icon-xiangxia1 size30 color_cc m-left4"></view>
					</view>
					</picker>
				</view>
			
			</view> -->
			<view class="list bot p-re">
				<text class="title_name ">街道</text>
				<view class="streent_pop" v-if="!street.length" @click="$Toast('请选择省市区地址')"></view>
				<picker mode="selector" :range="street" :value="streetVal" range-key="RegionName" @change="streetChange"
					class="flex-1 height p-re ">

					<view class="street size26 d-flex a-center" :class="RegionName?'color_33':'place'">
						{{RegionName?RegionName:'请选择街道'}}
					</view>
				</picker>
			</view>
			<view class="rows p-top24 p-bot24 bot">
				<view class="listText">
					<text class="title_name">详细地址</text>
					<textarea class="flex-1 color_33 size26 textarea" disable-default-padding :maxlength="-1"
						auto-height v-model.trim="Aaddress" placeholder="请填写详细地址" placeholder-class="place"></textarea>
					<view class="d-flex a-center color_99 p-left20 p-bot20 p-top20" v-if="position.longitude"
						@click="chooseLocation">
						<view class="iconfont icon-a-zu1418 h6"></view>
						<text class="h6 m-left4">定位</text>
					</view>
				</view>
			</view>

		</view>




		<view class="rows m-top50">
			<view class="botBtn Save flexac white" @click="SaveAddress">保存</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'

	export default {
		data() {
			return {
				order_id: '',

				recommend: '',
				recommend_Aregion: '',
				Aname: '',
				Amobile: '',
				Aregion: '',
				Aaddress: '',
				RegionName: '', // 街道
				region: [],

				showTime: false,
				reservationDate: '',
				timeVal: Number(new Date()),
				province: [],
				city: [],
				district: [],
				street: [], //街道数据
				streetVal: 0,
				lon: 0,
				lat: 0
			}
		},
		async onLoad(option) {
			if (option.name) this.Aname = option.name;
			if (option.tel) this.Amobile = option.tel;
			if (option.lon) this.lon = option.lon;
			if (option.lat) this.lat = option.lat;

			if (option.order_id) this.order_id = option.order_id;
			if (this.position.longitude == 0) {
				const result = await this.$pop.getLocation();
			};
			if (this.lon) this.geocoder(this.lon, this.lat);
			// this.getDivision(0,0);
		},
		onShow() {
			if (this.userInfo) this.Amobile = this.userInfo.phone;

		},
		methods: {
			...mapMutations(['getAddress']),
			geocoder(lon, lat) {
				this.$showLoading('');
				this.$http.get_ds({
					url: '/geocoder',
					data: {
						postStr: {
							lon,
							lat,
							ver: 1
						},
						type: 'geocode',
						tk: this.tdkey
					}
				}).then(res => {
					this.$hideLoading();
					if (res.status != 0) return;
					const result = res.result.addressComponent;
					if (result.town) this.RegionName = result.town;
					if (result.address) this.Aaddress = result.address;
					this.region[0] = result.province;
					this.region[1] = result.city ? result.city : result.province;
					this.region[2] = result.county;
					this.Aregion = `${this.region[0]}/${this.region[1]}/${this.region[2]}`;
					if (!result.county_code) return;
					const regioncode = result.county_code.substring(result.county_code.length - 6);
					this.getAdministrativeDivision(regioncode);
				})
			},
			chooseLocation() {
				let that = this;
				uni.chooseLocation({
					latitude: this.position.latitude,
					longitude: this.position.longitude,
					success(res) {
						that.RegionName = '';
						that.geocoder(res.longitude, res.latitude);
						that.disassemble(res);

					}
				})
			},
			disassemble(Data) {
				const areg = Data.address;
				const provinceIndex = areg.indexOf('省');
				const cityIndex = areg.indexOf('市');
				const districtIndex = areg.indexOf('区');
				let address_name = '';

				address_name = areg.substring(districtIndex + 1, areg.length);
				this.Aaddress = address_name + Data.name;
			},
			getDivision(regioncode, num) {
				this.$showLoading('');
				this.$http.post({
					url: '/singleSaleApi/getAdministrativeDivision',
					data: {
						regioncode
					}
				}).then(res => {
					if (res.code != '200') {
						this.$hideLoading();
						this.$Toast(res.msg);
						return;
					}
					const result = res.data || [];
					if (num == 0) this.province = result;
					if (num == 1) this.city = result;
					if (num == 2) this.district = result;
					if (num == 3) this.street = result;
					this.$hideLoading();
				})
			},
			addressChange(e, num) {
				const value = e.detail.value;
				if (num == 0) {
					this.$set(this.region, num, this.province[value].RegionName);
					this.city = [];
					this.district = [];
					this.region[1] = '';
					this.region[2] = '';
					this.getDivision(this.province[value].RegionCode, num + 1)
				} else if (num == 1) {
					this.$set(this.region, num, this.city[value].RegionName);
					this.district = [];
					this.region[2] = '';
					this.getDivision(this.city[value].RegionCode, num + 1)
				} else if (num == 2) {
					this.$set(this.region, num, this.district[value].RegionName);
					this.street = [];
					this.RegionName = '';
					this.getDivision(this.district[value].RegionCode, num + 1)
				}
				this.street = [];
				this.RegionName = '';

			},
			SaveAddress() {
				if (!this.Aname) return this.$Toast('请输入姓名');
				if (!this.Amobile) return this.$Toast('请输入手机号');
				if (this.Amobile && !this.$reg.phone.test(this.Amobile)) return this.$Toast('手机号输入有误');
				if (!this.reservationDate) return this.$Toast('请选择预约时间');
				if (!this.region[0] || !this.region[1] || !this.region[2]) return this.$Toast('请选择省市区');
				if (!this.RegionName) return this.$Toast('请选择街道');
				if (!this.Aaddress) return this.$Toast('请填写详细地址');

				const res_address = `${this.region[0]}${this.region[1]}${this.region[2]}${this.Aaddress}`
				this.$showLoading('保存中~');
				this.$http.post({
					url: '/dispatch/editOrderDispatch',
					data: {
						order_id: this.order_id,
						res_name: this.Aname,
						res_tel: this.Amobile,
						res_address,
						reservationDate: this.reservationDate,
						province: this.region[0],
						city: this.region[1],
						district: this.region[2],
						street: this.RegionName,
					}
				}).then(res => {
					this.$hideLoading();
					if (res.code != 100) return this.$Toast(res.msg);
					this.$Toast(res.msg, 2)
				})
			},



			getAdministrativeDivision(regioncode) {
				this.$showLoading('');
				this.$http.post({
					url: '/singleSaleApi/getAdministrativeDivision',
					data: {
						regioncode: `${regioncode}00`
					}
				}).then(res => {
					this.street = [];
					this.streetVal = 0;
					this.$hideLoading();
					if (res.code != 200) return;
					this.street = res.data;
				})
			},

			streetChange(e) {
				this.streetVal = e.detail.value;
				this.RegionName = this.street[e.detail.value].RegionName;
			},
			confirmTime(e) {
				const date = new Date(e.value);
				const year = date.getFullYear();
				const month = ('0' + (date.getMonth() + 1)).slice(-2);
				const day = ('0' + date.getDate()).slice(-2);
				const hours = ('0' + date.getHours()).slice(-2);
				const minutes = ('0' + date.getMinutes()).slice(-2);

				const formattedDate = `${year}-${month}-${day}`;
				const formattedTime = `${hours}:${minutes}`;
				this.reservationDate = `${formattedDate} ${formattedTime}`;
				this.showTime = false;
				this.timeVal = e.value;
			},


		},
		onUnload() {
			this.getAddress('')
		},
		computed: {
			...mapState(['color', 'position', 'userInfo', 'resultAdd', 'tdkey']),

		}

	}
</script>
<style>
	page {
		background-color: #f7f9fa;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
	}
</style>
<style lang="scss" scoped>
	.list {
		width: 100%;
		height: 90rpx;
		display: flex;
		align-items: center;
	}

	.picke {
		height: 90rpx;
	}

	.listText {
		width: 100%;
		display: flex;
		min-height: 90rpx;
		overflow: hidden;
	}

	.title_name {
		width: 120rpx;
		color: #000;
		font-size: 28rpx;
		color: #949495;
		text-align-last: justify;
		margin-right: 30rpx;
	}

	.district {
		max-width: 120rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical
	}

	/deep/.place {
		color: #ccc;
	}

	.city {
		position: relative;
		height: 100%;
		overflow: hidden;
	}

	.cityPick {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 80;
	}

	.textarea {
		min-height: 100rpx;
		padding-top: 6rpx;
		padding-bottom: 10rpx;
		display: block;
	}

	.botBtn {
		width: 690rpx;
		height: 80rpx;
		margin: 30rpx auto 0;
		border-radius: 40rpx;
		font-size: 28rpx;
	}

	.delAdd {
		border: 1rpx solid #f0f1f3;
	}

	.Save {
		background-color: var(--color);
	}

	.street,
	.pickerTime {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 100;
	}

	.pickerTime {
		z-index: 1000 !important;
	}

	.streent_pop {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 200;
	}
</style>